import ListItem from "@/components/ListItem";
import NavigateItem from "@/components/ListItem/NavigateItem";
import PageContainer from "@/components/PageContainer";
import Switch from "@/components/Switch";
import useEvent from "@/hooks/useEvent";
import { fetchDeviceAlarmSetting, updateDeviceAlarmSetting } from "@/services/deviceAlarm";
import { GStyleSheet } from "@/utils/DarkMode";
import { Text, View } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { observer } from "mobx-react";
import React, { useEffect, useState } from "react";

const dstyle = GStyleSheet.create({
  item: {
    marginTop: 10,
  },
  bottomText: {
    color: '#007AFE',
    position: 'absolute',
    width: '100%',
    bottom: '30PX',
    left: 0,
    textAlign: 'center'
  },
});

type Params = {
  mac: string;
  productKey: string;
}

type AlarmSetting = GetResponseData<typeof fetchDeviceAlarmSetting>;

const DeviceAlarmSetting: React.FC = () => {
  const styles = dstyle.useDynamicStyle();
  const [setting, setSetting] = useState<AlarmSetting | null>(null);

  const router = useRouter<Params>();
  const { mac, productKey } = router.params || {};

  useEffect(() => {
    if (!mac || !productKey) {
      return;
    }
    fetchDeviceAlarmSetting(mac, productKey).then((res) => {
      if (res.success && res.data) {
        setSetting(res.data);
      }
    })
  }, [mac, productKey]);

  const updateSetting = useEvent(async (key: keyof (Pick<AlarmSetting, 'callNotice' | 'jgNotice' | 'smsNotice' | 'wechatNotice'>), value: boolean) => {
    if (!setting) {
      return;
    }
    const newSetting = { ...setting, [key]: value };
    const res = await updateDeviceAlarmSetting(newSetting);
    if (res.success) {
      setSetting(newSetting);
    }
  });

  const updateWeChatSetting = useEvent((value: boolean) => updateSetting('wechatNotice', value));
  const updateSmsSetting = useEvent((value: boolean) => updateSetting('smsNotice', value));
  const updateCallSetting = useEvent((value: boolean) => updateSetting('callNotice', value));

  return (
    <PageContainer title='报警推送'>
      <View>
        <ListItem
          style={styles.item}
          extra={<Switch disabled={!setting} checked={setting?.wechatNotice} onChange={updateWeChatSetting} />}
        >
          微信推送
        </ListItem>
        <ListItem
          style={styles.item}
          extra={<Switch disabled={!setting} checked={setting?.smsNotice} onChange={updateSmsSetting} />}
        >
          短信推送
        </ListItem>
        <ListItem
          style={styles.item}
          extra={<Switch disabled={!setting} checked={setting?.callNotice} onChange={updateCallSetting} />}
        >
          电话报警
        </ListItem>
        <NavigateItem
          style={styles.item}
          arrow
          url={`/pages/deviceAlarm/emergencyContact/index?mac=${mac}&productKey=${productKey}`}
        >
          紧急联系人
        </NavigateItem>
      </View>
      <Text onClick={() => {
        Taro.navigateTo({
          url: '/pages/alarmPush/alarmPushTips'
        })
      }} style={styles.bottomText}
      >
        如何开启微信订阅消息？
      </Text>
    </PageContainer>
  );
};

export default observer(DeviceAlarmSetting);
